<template>
  <a-card title="预警详情">
    <span slot="extra" href="#"><a-button @click="back()" style="margin-left: 8px"> 返回 </a-button></span>
    <MapTencentCom ref="map" :zoom="10" :pitch="30" />
  </a-card>
</template>

<script>
import { viewCre_warning } from '@/api/correction/cre_warning.js'

export default {
  data() {
    return {}
  },
  created() {
    this.view(this.$route.params.warnid)
  },
  methods: {
    async view(id) {
      const { data } = await viewCre_warning(id)
      if (data) {
        // 将预警点显示到地图上
        setTimeout(() => {
          this.$refs.map.addMarker([
            {
              id: 'mk1',
              lat: data.latcamera,
              lng: data.lngcamera,
              addr: data.addr,
              time: data.rectime,
              img: `<img alt="预警图片" style="width: 300px; width: 200px;"  src="${data.photo}" />`,
            },
          ])
        }, 1000)
      }
    },
    // 返回
    back() {
      if (this.$route.query.url) {
        if (this.$route.query.tabkey) {
          this.$router.push({
            path: this.$route.query.url,
            query: {
              queryParam: this.$route.query.queryParam,
              tabkey: this.$route.query.tabkey,
            },
          })
        } else {
          this.$router.push({
            path: this.$route.query.url,
            query: {
              queryParam: this.$route.query.queryParam,
            },
          })
        }
      } else {
        this.$router.go(-1)
      }
    },
  },
  components: {
    MapTencentCom: () => import('@/views/visualization/map/MapTencent_com.vue'),
  },
}
</script>

<style lang="scss" scoped>
</style>
